import React , {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    TouchableOpacity,
    Alert,
    ImageBackground
} from 'react-native';
import Forecast from './Forecast';

class WeatherProject extends Component{
    constructor(props) {
        super(props);
        this.state = {
            showValue: '',
            forecast: {
                main: '-',
                description: '-',
                temp: ''
            }
        }
    }
    clickBtn(){
        // Alert.alert(this.state.showValue);
        var city = this.state.showValue;
        fetch('http://tj.nineton.cn/Heart/index/all?city=CH' + city).then((response) => response.json()).then((responseJSON) => {
            console.log(responseJSON.weather[0].now);
            this.setState({
                forecast: {
                    main: responseJSON.weather[0].city_name,
                    description: responseJSON.weather[0].now.text,
                    temp: responseJSON.weather[0].now.temperature
                }
            })
        }).then((error) => {
            console.log(error);
        })
    }
    render(){
        return (
            <ImageBackground source={require('./images/bg.png')} resizeModel='cover' style={styles.backdrop}>
                <View style={styles.container}>
                    <Text style={styles.welcome}>
                        You input {
                            this.state.showValue
                        }
                    </Text>
                    <Forecast main={this.state.forecast.main} description={this.state.forecast.description} temp={this.state.forecast.temp}/>
                    < TextInput underlineColorAndroid='transparent' style = {
                        styles.input
                    }
                    onChangeText = {(text) => 
                        this.setState({
                            showValue: text
                        })
                    } value={this.state.showValue}></TextInput>
                    <TouchableOpacity onPress={() => this.clickBtn()}>
                        <View style={styles.searchBtn}>
                            <Text style={styles.searchBtnText}>Search</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        )
    }
}

const styles={
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    backdrop: {
        flex: 1,
        flexDirection: 'column',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    input: {
        width: 234,
        fontSize: 20,
        borderBottomWidth: 0.5,
        borderBottomColor: '#fff',
        height: 40,
    },
    searchBtn:{
        padding: 10,
    },
    searchBtnText:{
        fontSize: 18,
        color: '#fff',
    }
}

export default WeatherProject;
